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ABSTRACT 



The way information is visually designed and synthesized 
greatly affects how people understand and use that information. Increased use 
of the World Wide Web as a teaching tool makes it imperative to question how 
visual/verbal information presented via the Web can increase or restrict 
understanding. The purpose of this study was to examine students' perceptions 
of the effectiveness of visuals in conveying the instructional message in an 
educational Web course. Participants were 15 seven-, eight-, and 
nine-year-old students. The students were asked about the design of the pages 
using one of the top Web course sites for children. Questions focused on 
inf ormation/instructional purposes, graphic/picture elements, text/lettering 
elements, color, layout, and texturing. Results indicated the following: (1) 

none of the students understood that all the sites dealt with child safety; 

(2) the majority of the students understood the concept of the sites as they 
read the information being presented, and at this point, did not use the 
visual designs to interpret the meaning of the sites; (3) the visual designs 
did not help the students make an association with the information being 
given; (4) students liked the color of the lettering and the background, 
which used cold colors; (5) students liked the uniformed layout of the sites, 
and none had difficulty moving from one location to another. (AEF) 
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The way information is visually designed and synthesized greatly affects how people understand 
and use that information. Educators have long been aware that conceptual and perceptual stvles. 
past experiences, and cultural background affect the way people leam. Good teachers consider 
individual differences and learning styles as they teach. Now, increased use of the World Wide 
Web as a teaching tool makes it imperative to question how visual/verbal information presented via 
the WWW can increase or restrict understanding. The purpose of this study is to examine 
students' perceptions of the effectiveness of visuals in conveying the instructional message. 



Introduction 

Today's rapid advancement of new 
technologies has made the impact that visual 
images have on education very evident. 
Heinich, Molenda and Russell (1993) stated, 

"We are a visual society; one that has 
experienced the increasing production and 
distribution of visual messages in recent 
years" (p. 66). 

One of the more prominent emerging 
technologies is the World Wide Web (WWW). 

An ever growing number of educational sites 
are being developed on the World Wide Web 
to provide a source of information for teachers 
and students. The graphical user-friendly 
features of the World Wide Web allow for 
greater versatility of presentation design. The 
Web designers are able to accommodate a 
wider range of learning preferences by using 
Web attributes such as sound, images, and 
text. The educational sites are generally useful 
in content. However, the quality of the design, 
from an instructional design perspective, is not 
always w'hat it should be (El-Tigi & Branch, 
in press). 

The purpose of this study is to examine 
students' perception of the effectiveness of 
visuals in conveying the instructional 
message. The contention is that good 
instructional design provides procedures for 
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assessing the quality of the graphics in terms 
of how they are perceived by the intended 
audience. 

The focus of this study is to examine 
specific visual design elements specified by 
researchers (Heinich, Molenda and Russell. 

1993) as attributes of quality visuals. The 
research question is: How does the intended 
audience perceive the effectiveness 
and meaningfulness of the visuals presented in 
terms of the following: 

• information/instructional purposes 
graphic/picture elements 

• text/lettering elements 

• color 

• layout 

Designing with Learning Preferences 
in Mind 

The process of designing effective 
instructional media relies upon careful 
planning. The planning should include a needs 
analysis and a learners analysis. The learners 
analysis must contain the learner's 
learning preference (Dick and Carey 1996). A 
learner's learning preferences may be one of 
the following: 

• visual: a learner prefers to read rather 

than listen to discussions; “permission to reproduce this 
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• auditory: a learner prefers to listen to a 
tape and/or discussions rather than read; 
and 

• kinesthetic: a learner prefers concrete 

experiences rather than abstract learning. 

Therefore, a designer must create with all 
three of the learning preferences in mind. In a 
Web Course design, the designer should 
include written language with audio script of 
the text for the auditory learner. The course 
should include graphic pictures that represent 
the meaning of the text for the visual learner. 

Learning from Visuals 

According to Heinich, Molenda and Russell 
(1993), students learn from visuals by being 
able to read, understand, and interpret visuals 
accurately. Thus, the students decode the 
information that they see. The students must 
also be able to encode information by creating 
a visual in order to communicate effectively 
with others through the visuals. 

When visuals are used in a Web site, the 
images are used to illustrate something. The 
images should illustrate as accurately as 
possible the designer’s point of instruction. 
They should be realistic pictures that allow the 
learner to create an association between the 
text and the image. The image should help 
cue the student learning process. For 
example: if the designer’s site is informing 

children about poison, the designer might 
include a graphic of skull with two bones 
crossing making an M X”. This symbol is the 
common symbol for poison. 

Designing Visual Material for Learning 

Meaningful learning is one of the 
fundamental tenants of instructional design. 
According to Ausubel (1968). material 
presented is comprehended in the process of 
internalization. Visuals serve as concrete 
clues to meaning. Concrete referents enhance 
communication and understanding through 
clarification of abstract concepts. Heinich, 
Molenda. & Russell (1993) state that visuals 



"Attract attention, sustain attention, and 
generate emotion" (p. 66). Consequently, 
visuals aid reiteration of information by 
allowing easier storage and retrieval of 
information. Ultimately, visuals can also 
motivate learners by increasing their 
interest in the text. 

There are several factors to consider when 
designing visuals for instructional purposes. 
Among these factors are color selection, 
layout of visual and verbal elements, text and 
lettering and texture among others. 

Text/Lettering Elements 

Three factors ought to be considered in the 
design process; style, color of text and size of 
text. Heinich, Molenda, and Russell (1993) 
recommend that consistency and harmony with 
other elements influence the choice of 
style. Plain style is suggested for use for 
instructional material. Lowercase letters are 
most legible. Short headlines maybe written in 
all caps as long as they do not exceed three 
words. The color of text ought to be selected 
based on how' well it contrasts with the 
background color. Contrast enhances 

legibility, while stronger contrast achieves 
greater emphasis. Finally the size of lettering 
ought to be estimated based on the distance 
from which it will be read. Therefore, larger 
text size should be used for bigger classrooms. 

Color 

Research attributes mood and movement to 
color. Color commands attention and 
enhances visual impact. Color serves to 
heighten realism of image; point out 
similarities and differences; highlight 

important information and detail; and create a 
particular emotional response (Heinich, 

Molenda, and Russell, 1993). Colors could be 
categorized into cool and warm colors. Warm 
colors such as red, yellow and orange could be 
used to approach the viewer to gain the 
readers attention. In contrast, cool colors such 
as blue, green, and violet tend to retract. 



Layout 

The arrangement of the text and graphics 
help the design into a logical sequence for 
learning. Faioloa and Debloois (1988) found 
that dividing larger portions of information 
into smaller units of information improves 
visual clarity and results in improved retention 
of information. Therefore, the arrangement 
of the information should be consistent 
throughout the design of the course because 
the learner needs to concentrate on the content 
of the information and not the way it is 
presented. 

Texture 

Texture is a characteristic of three 
dimensional objects and materials. It serves to 
convey a clearer idea of the subject to the 
viewer by suggesting the sense of touch. 
Texture provides emphasis, separation, or 
enhances unity. Given the multi-dimensional 
attributes of the Web, scanned images, 
cartoon characters and texture enhanced 
images are easily depicted. 

Method 

The designer should be creating Web 
courses with the learner in mind. In order to 
see the extent to which the learners could 
contribute to the evaluation of an instructional 
material on the Web, we interviewed 
elementary students on their perception of 
visual design in a Web course. 

Participants 

Participants of the study are 7, 8 and 9 
year olds. Fifteen students were able to 
participate in the study. Students were asked 
their overall understanding of the topic, their 
learning preference and their perception of the 
visual aids in the course. 



Table 1 Participants 



Male 6 

Female 9 

7 year olds 1 

8 year olds 1 

9 year olds 13 

3rd Grade 2 

4th Grade 1 3 



Data Collection Procedures 

We used one of the top 5% (rated by Point 
Communication Corporation) Web course 
sites for children. We selected this site due to 
the appropriateness of the content, which is 
specifically geared to that population group. 

A ten-item survey was designed to elicit 
specific responses regarding comprehension of 
instructional message based on both image 
cues and text. Pages geared at three specific 
situations were selected out of approximately 
20 sets. The selection process was based 
on a pilot study which helped determine the 
most useful content to the specific age group 
and also the overall quality of the information 
and visuals provided. The best three were 
selected based on this criteria. We asked the 
children about the design of the pages 
including: 

• information/instructional purposes 

• graphic/picture elements 

• text/lettering elements 

• color 

• layout 

• texturing 

Students were interviewed in 10 minute 
segments given their short attention span and 
also the constraints of conducting an interview 
during specific class hours. 

Data Analysis 

Information/instructional purposes 
Throughout the interviewing process, none 
of the students understood that all the sites 
dealt with kid safety. This phenomenon was 
expected by the researchers because the Web 
course only mentioned the performance 
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objectives on the beginning home page. This 
is interesting because a key principal of 
Instructional Design is a clear statement of the 
performance objective for every introduction 
of a new instructional event. Listed below are 
the students perception of the Web sites. 

What do you think the Web site is about? 

Site 1: Telephone Safety 

• telephone 

• teacher about to teach - sitting at a desk 

• when you are alone 

• waiting for a call - thinking about 
answering the phone 

• telephone 

• principal - what if the telephone 

• what to do if the phone rings 

• Do I answer the question- What should I 
do if the phone rings 

• waiting for something 

• answer phone 

• talking about a phone 

• teacher sitting at desk 

• don’t know what site is about 

Site 2: Drug Safety 

• drugs 

• person drinking 

• selling drinks 

• sell someone drugs 

• kids offering wine 

• drugs and alcohol 

• not sure - not to take drugs or alcohol 

• drugs or alcohol 

• not clear 

• asks a question- what should you do 

• bullies 

• drinking 

• drugs - alcohol because there is a beer 
bottle 



• rabbit happy 

• rabbit hopping no idea what 

• someone drinking cleaning stuff 

• rabbit looks sick 

• rabbit with yucky face - poison 

• somebody swallowed some poison 

• not to drink poison by reading 

• rabbit scared 

• poison 

• no idea- 1 don't know 

• poison site 

• it says poison 

As the students read the information being 
presented, it became apparent to the 
researchers that the majority of the students 
understood the concept of the sites (Figure 1). 
At this time in the research process, the 
students did not use the visual designs to 
interpret the meaning of the sites. The 
students comments were: 

Figure 1 

Understand Site Concept 



I 

fisitel I 
i E 2 Site 2 

Really Bad Good Really ;QSHe3 
Bad Good 1 | 

Rating 



Tell me one thing you have to do to be safe? 

Student Comments 

Site 1: Telephone Safety 

• never tell caller your alone - no way get a 
life 




Site 3: Poison Safety Site 2: Drug Safety 

• stay from poison . S ay n0 t0 drugs 
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how to deal with electricity 



• say no 

• tells you to choose a different friend, 
nobody around 

• walk away report to adult 

• walk away and tell parents - several don't 
make sense 

Site 3: Poison Safety 






Picture 2 

• wiggling 

• nobody says no 

• never say your name 

• talk to parents 



• writing tell you all the things you should 
do 

• walk away and report to adult 

• call 911 



Graphic/Picture Elements 
The visual designs did not help the students 
make an association with the information 
being given (Figures 2 - 4); even though, the 
students tried to make an association between 
the picture and the information being given. 
The following are some of the students 
interpretation of the visual designs. 

Do the pictures help you understand what to 
do? 



Figure 2 



Site 1: Telephone Safety 




Really Bad Good Really 
Bad Good 



Site 1: Telephone safety Picture 1 



Figure 3 



Site 2: Drug Safety 




Really Bad Good Really 
. Bad Good 



Q Picture 1|j 
H Picture 2jj 



Rating 



Site 2: Drug Safety Picture 1 

• person drinking little hit because 

• someone offering 

• someone is offering 

• does kid handing out wine to other kids 

• picture not good 

• doesn’t tell if it is a bad drink 

• because of XXXX on bottle 

• doesn't tell about drugs 

Picture 2 

• dressed to go out - waiting for someone to 
come 

• not clear 

• she is not drinking any 



• little/has a phone- someone is going to 
answer 

• no clue of answer - there is a telephone 
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Figure 4 



Site 3: Posion Safety 



Figure 5 




Rating 



Site 3: Poison Safety Picture 1 






not clear 

tell parents - say no to do whats right 
he could be screaming about seeing a 
ghost 

because he’s drinking poison 

somebody joking around - something is 

wrong 

he looked sick/different color eyes - funny 
thing or bad 
shocked may be sick 
don’t swallow things 

Picture 2 

rabbit eat something good 

rubbing tummy cuz happy and something 

good 

not doing anything 
rubbing stomach 
he’s happy and smiling 



Text/Lettering Elements 
The majority of the students thought the size 
of the lettering was okay (Figure 5). This is 
opposite of the opinion of the researchers. 

Are the letters large enough to read? 



Size of Letters 



10 r -: 
8 p 

:| 

2 -ii 
o iH 



m 



Really 

Bad 



Bad 



Good 



Really 

Good 



Rating 



Color 

The students like the color of the lettering 
and the background (Figure 7 and 9). Some 
students did have suggestion of different 
colors for both the letters and the background 
(Figure 8 and 10). The students response is 
the opposite of research conducted in the -field 
of color. According to research, children 
prefer warm colors; however, this Web course 
used cold colors. 



Do vou like the white colors? 



Figure 6 



Color of Letters 
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What color would you like to make the letters? 
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Figure 7 




Do you like the black background? 



Figure 8 




What color would you make the background? 




Layout 

The students liked the layout of the sites. 
All of the sites were uniformed and contained 
the same number of visual designs to help the 
students. None of the students had difficulty 
moving from one location to another location 
in the Web course (Figure 10). 



Is it easy to move from one location on the 
page to another using the icon? 

Figure 10 



Moving From One Location to Another 




Other comments students mentioned 

• have a computer but don’t use it 

• writing helped - picture no good 

• not familiar with screen - like to leam this 
way 

• worked on hi-tech at old school - would 
like to leam about computers 

• exciting to wait - something might pop up 

• used computers - not very familiar with 
on-line - likes this learning 

• not familiar with on-line document - 
pictures not enough detail - no the 
information not helpful - nice to have 
picture (don’t tell) use mouse 

Discussion and Conclusion 

The way information is visually designed 
and synthesized greatly affects how people 
understand and use that information. 
Educators have long been aware that 
conceptual and perceptual styles, past 
experiences, and cultural background affect 
the way people leam. Good teachers consider 
individual differences and learning styles as 
they teach. 

Therefore, the design of quality instructional 
material involves a learner-centered approach 
which takes into account the learning 
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characteristics of the intended audience of the 
Web site. Each component of the information 
presentation process for a Web course must be 
designed with the intended learners age. 
learning preferences, and culture in mind, in 
addition to several other characteristics. The 
qualitv of information presentation for 
instructional purposes should be assessed in 
ways which involves the process of designing, 
developing and evaluating instructional 
material. Therefore, the Web Designer must 
incorporate the learner in the design and 
development stage of the course along with the 
use of the learner during the formative and 
summative evaluation of the course. 

Further Research 

Further research needs to be conducted on 
how elementary students perceive visual 
design. The questions that still remain to be 
asked are: 

• Do designers of Web Courses pilot their 
course with elementary students before 
implementation of the course ? 

• Do students prefer to use visuals to help 
them understand information being 
presented? 



• What changes could be made to improve 
the visuals in the Web site, used in the 
study, from the students' perception? 
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